<template lang="pug">
div.home
  div.top
    el-row(
      :gutter="15"
    )        
      el-col(
        :span="8"
      )
        div.bg-item
          div.title-padding
            div.title 标本统计
          el-row
            el-col(
              :span="8"
            )
              div.item
                div.txt 今日已采集数
                div.num {{ data.getHomepageStatistics.signedTodayNum }}

            el-col(
              :span="8"
            )
              div.item
                div.txt 今日待采集数
                div.num {{ data.getHomepageStatistics.todayWaitingNum }}

            el-col(
              :span="8"
            )
              div.item
                div.txt 累计采集数
                div.num {{ data.getHomepageStatistics.signedNumNum }}

      el-col(
        :span="8"
      )
        div.bg-item
          div.title-padding
            div.title 报告统计
          el-row
            el-col(
              :span="8"
            )
              div.item
                div.txt 今日已化验数
                div.num {{ data.getHomepageStatistics.analysisdTodayNum }}

            el-col(
              :span="8"
            )
              div.item
                div.txt 今日待化验数
                div.num {{ data.getHomepageStatistics.todayLaboratoryNum }}

            el-col(
              :span="8"
            )
              div.item
                div.txt 累计化验数
                div.num {{ data.getHomepageStatistics.analysisNumNum }}

      el-col(
        :span="8"
      )
        div.bg-item
          div.title-padding
            div.title 人员统计
          el-row
            el-col(
              :span="8"
            )
              div.item
                div.txt 今日已生成数
                div.num {{ data.getHomepageStatistics.generatedTodayNum }}

            el-col(
              :span="8"
            )
              div.item
                div.txt 今日待生成数
                div.num {{ data.getHomepageStatistics.toBeGeneratedTodayNum }}

            el-col(
              :span="8"
            )
              div.item
                div.txt 累计生成数
                div.num {{ data.getHomepageStatistics.accumulatedGenerationNum }}
  div.middle
    el-row(
      :gutter="15"
    )
      el-col.left(
        :span="16"
      )
        el-row(
          :gutter="15"
        )
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="bbcjImg"
                height="60px"
              )
              div.title 标本采集
              div.txt 临床诊断的重要步骤
              div.btn(
                @click="pushTo('/lis/manage/specimen/specimen-collection')"
              ) 进入
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="bbsjImg"
                height="60px"
              )
              div.title 标本送检
              div.txt 临床诊断中的一个环节
              div.btn(
                @click="pushTo('/lis/manage/specimen/specimen-inspection')"
              ) 进入
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="bbqsImg"
                height="60px"
              )
              div.title 签收标本
              div.txt 接收和处理临床标本的环节
              div.btn(
                @click="pushTo('/lis/manage/specimen/specimen-receipt')"
              ) 进入
          el-col(
            :span="6"
          )
            div.left-item
              img(
                :src="jyfxImg"
                height="60px"
              )
              div.title 检验分析
              div.txt 对样本检测获取诊断信息的步骤
              div.btn(
                @click="pushTo('/lis/manage/specimen/specimen')"
              ) 进入
      el-col.right(
        :span="8"
      )
        div.right-item
          el-row.flex-center(
            :gutter="15"
          )
            el-col(
              :span="12"
            )
              div.item
                img(
                  :src="ycjImg"
                  height="60px"
                )
                div.title 已采集
                div.num {{ data.getHomepageStatistics.signedNumNum }}
            el-col(
              :span="12"
            )
              div.item
                img(
                  :src="ysjImg"
                  height="60px"
                )
                div.title 已送检
                div.num {{ data.getHomepageStatistics.sentinspectionNum }}
          el-row.flex-center(
            :gutter="15"
          )
            el-col(
              :span="12"
            )
              div.item
                img(
                  :src="dshImg"
                  height="60px"
                )
                div.title 待审核
                div.num {{ data.getHomepageStatistics.analysisNumNum }}
            el-col(
              :span="12"
            )
              div.item
                img(
                  :src="yshImg"
                  height="60px"
                )
                div.title 已审核
                div.num {{ data.getHomepageStatistics.auditedNum }}
  div.bottom
    el-row(
      :gutter="15"
    )
      el-col(
        :span="6"
      )
        div.left
          div.title-padding
            div.title 分类统计
          div.echartsData(
            ref="echartsData"
          )
      el-col(
        :span="8"
      )
        div.table
          div.title-padding
            div.title 待签收列表
          div.content-padding
            mt-table(
              style="height: 95%"
              v-bind="overdueTableProps"
            )
      el-col(
        :span="10"
      )
        div.table
          div.title-padding
            div.title 危急值记录
          div.content-padding
            mt-table(
              style="height: 95%"
              v-bind="tableProps"
            )
      
</template>

<script setup lang="ts">
import bbcjImg from "./assets/bbcj.png";
import bbsjImg from "./assets/bbsj.png";
import bbqsImg from "./assets/bbqs.png";
import jyfxImg from "./assets/jyfx.png";
import ycjImg from "./assets/ycj.png";
import ysjImg from "./assets/ysj.png";
import dshImg from "./assets/dsh.png";
import yshImg from "./assets/ysh.png";

import { onMounted, ref } from "vue";
import * as echarts from "echarts";

import {
  type TableProps,
  type TableColumnProps,
  Icon,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { useRouter } from "vue-router";
import { type ApiBasedOption, useApi } from "@scmt/core-api";
import {
  ESourceStatus,
  ESpecimenStatus,
  ESpeimenTableColumnKey,
  specimenColumns,
} from "@scmt/api-common";
import {
  type CriticalValueEntity,
  type CriticalValueQueryParams,
} from "@scmt/api-lis-critical-value";
import { type InspectionAgencyEntity } from "@scmt/api-lis-inspection-agency";
import { useStatistics } from "./conposables/statistics";

const $router = useRouter();
const $api = useApi();
const queryPramas = reactive<CriticalValueQueryParams>({
  states: 0,
  pageNum: 1,
  pageSize: 20,
});

const specimenQueryParams = reactive({
  // state: ESpecimenStatus.Submission,
  signingStartDate: "",
  signingEndDate: "",
  pageNum: 1,
  pageSize: 20,
});
const { statistics, getStatistics } = useStatistics();
const { data, request, loadingMap } = useRequest(
  {
    specimenData: async (q?: any) => {
      return $api.lis.inspectionAgency
        .query(specimenQueryParams)
        .then((res) => {
          Object.assign(specimenQueryParams, res.pagination);

          return res;
        });
    },
    getHomepageStatistics: () => {
      return $api.lis.specimen.getHomepageStatistics();
    },
    tableData: (q: any) => {
      const params = Object.assign(
        { source: ESourceStatus.LIS },
        queryPramas,
        q
      );
      return $api.lis.criticalValue.query(params);
    },
    listDoctorAsOptions: (val: string) =>
      $api.user.listDoctorAsOptions({ officeId: val }),
  },
  {
    getHomepageStatistics: {
      generatedTodayNum: 0,
      auditedNum: 0,
      todayWaitingNum: 0,
      toBeGeneratedTodayNum: 0,
      todayLaboratoryNum: 0,
      analysisdTodayNum: 0,
      analysisNumNum: 0,
      accumulatedGenerationNum: 0,
      sentinspectionNum: 0,
      signedTodayNum: 0,
      signedNumNum: 0,
    },
    specimenData: {
      items: [] as InspectionAgencyEntity[],
      pagination: {
        total: 0,
        pageNum: specimenQueryParams.pageNum,
        pageSize: specimenQueryParams.pageSize,
      },
    },
    tableData: {
      items: [] as CriticalValueEntity[],
      pagination: {
        total: 0,
        pageNum: queryPramas.pageNum,
        pageSize: queryPramas.pageSize,
      },
    },
    listDoctorAsOptions: [] as ApiBasedOption[],
  }
);
const tableProps = computed(() => {
  const columns: TableColumnProps[] = [
    {
      prop: "outpatientNumber",
      label: "来源编号",
      tooltip: true,
      width: 160,
    },
    {
      prop: "patientName",
      label: "患者姓名",
      width: 90,
    },
    {
      prop: "reportId",
      label: "上报人员",
      tooltip: true,
      width: 90,
      render: ({ row }) => {
        const patientType = data.listDoctorAsOptions ?? [];
        let resText = row.reportId + "";
        if (patientType && patientType.length > 0) {
          let filter = patientType.filter((item) => item.value == row.reportId);
          if (filter && filter.length > 0) {
            resText = filter[0].label;
          }
        }
        return h("div", resText);
      },
    },
    {
      prop: "reportTime",
      label: "上报时间",
      tooltip: true,
      minWidth: 180,
    },
    {
      prop: "state",
      label: "状态",
      tooltip: true,
      minWidth: 180,
      render: ({ row }) => {
        let iconName = "";
        let content = "";
        let color = "";
        switch (row.state) {
          case 0: {
            iconName = "Promotion";
            content = "已上报";
            color = "green";
            break;
          }
          case 1: {
            iconName = "Memo";
            content = "已确认";
            color = "orange";
            break;
          }
        }
        return h(
          "div",
          {
            style: {
              display: "flex",
              alignItems: "center",
            },
          },
          [
            h(Icon, {
              name: iconName,
              style: {
                color: color,
              },
            }),
            h(
              "span",
              {
                style: {
                  marginLeft: "var(--mt-margin-small)",
                },
              },
              content
            ),
          ]
        );
      },
    },
  ];

  const props: TableProps = {
    loading: loadingMap["tableData"],
    data: data.tableData.items,
    pagination: data.tableData.pagination,
    columns,
    onPaginate: (q) => request("tableData", q),
  };
  return props;
});
const overdueTableProps = computed(() => {
  const columns: TableColumnProps[] = [
    //业务来源
    specimenColumns[ESpeimenTableColumnKey.Source],
    {
      prop: "specimenType",
      label: "标本类型",
      tooltip: true,
    },
    {
      prop: "sendInspectionId",
      label: "送检人",
      tooltip: true,
      render: ({ row }) => {
        const patientType = data.listDoctorAsOptions ?? [];
        let resText = row.sendInspectionId;
        if (patientType && patientType.length > 0) {
          let filter = patientType.filter(
            (item) => item.value == row.sendInspectionId
          );
          if (filter && filter.length > 0) {
            resText = filter[0].label;
          }
        }
        return h("div", resText);
      },
    },
    {
      prop: "generationTime",
      label: "送检时间",
      format: "datetime",
    },
  ];

  const props: TableProps = {
    loading: loadingMap["specimenData"],
    data: data.specimenData.items,
    pagination: data.specimenData.pagination,
    columns,
  };
  return props;
});
const echartsData = ref(null);
const getLeftEchartData = (echartData: any[]) => {
  const chartInstance = echarts.init(echartsData.value);
  let color = ["#0E7CE2", "#FF8352", "#E271DE", "#4AEAB0"];

  let formatNumber = function (num) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ",");
  };
  let option = {
    color: color,
    title: [
      {
        text: "分类统计",
        left: "38%",
        top: "47%",
        textStyle: {
          fontSize: 25,
          color: "#000000",
          fontWeight: "bold",
        },
      },
    ],
    legend: {
      top: "10%",
      itemWidth: 13,
      itemHeight: 13,
      icon: "circle",
      itemGap: 10,
      formatter(name) {
        let result = echartData.find((item) => item.name == name);

        return `{a|${result.name}}   ${parseInt(result.value)}`;
      },
      textStyle: {
        color: "#000",
        rich: {
          a: {
            fontSize: 14,
            color: "#666",
            padding: [0, 10, 0, 6],
          },
          b: {
            fontSize: 14,
            color: "#666",
            padding: [0, 6, 0, 6],
          },
        },
      },
    },
    polar: {
      radius: ["50%", "60%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },

    series: [
      {
        type: "pie",
        radius: ["45%", "55%"],
        center: ["50%", "50%"],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            borderColor: "#fff",
            borderWidth: 2,
          },
        },
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
      },
      {
        name: "",
        type: "pie",
        startAngle: 90,
        radius: "40%",
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          normal: {
            labelLine: {
              show: false,
            },
            color: "#F2F5FF",
          },
        },
        data: [
          {
            value: 100,
          },
        ],
      },
    ],
  };
  chartInstance.setOption(option);
  window.addEventListener("resize", function () {
    chartInstance.resize(); // 当屏幕尺寸变化时，重置图表的大小
  });
};

watch(statistics, (val) => {
  console.log(val)
  getLeftEchartData(val);
});
onMounted(() => {
  getStatistics();
  request([
    "listDoctorAsOptions",
    "getHomepageStatistics",
    "tableData",
    "specimenData",
  ]);
});

const pushTo = (path: string) => {
  $router.push(path);
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;

  .top {
    .bg-item {
      background-color: #fff;
      border-radius: 10px;
    }

    .title-padding {
      padding-top: 15px;
    }

    .title {
      color: #000000;
      font-size: 18px;
      font-weight: bold;
      padding-left: var(--mt-padding);
      border-left: 3px solid var(--el-color-primary);
      height: 16px;
      line-height: 16px;
    }

    .item {
      text-align: center;
      padding: 15px 0;

      .txt {
        font-size: 17px;
        color: #808080;
      }

      .num {
        color: #000000;
        font-size: 30px;
        font-weight: bold;
        padding: 15px 0;
      }

      .btn {
        font-size: 17px;
        color: #409eff;
        cursor: pointer;
      }
    }
  }

  .middle {
    margin: 15px 0;

    .left {
      .left-item {
        border-radius: 10px;
        background-color: #fff;
        text-align: center;
        padding: 30px 15px;

        .title {
          color: #000000;
          font-size: 18px;
          font-weight: bold;
          padding: 10px 0 10px;
          cursor: pointer;
        }

        .txt {
          color: #808080;
          font-size: 16px;
          padding: 15px 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .btn {
          background-color: #409eff;
          color: #fff;
          width: 100px;
          border-radius: 10px;
          padding: 5px 0;
          border-radius: 20px;
          padding: 3px 0;
          margin: auto;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }

    .right {
      .right-item {
        display: grid;
        border-radius: 10px;
        height: 100%;
        background-color: #fff;
        padding: 0 5px;

        .flex-center {
          align-items: center;
        }

        .item {
          display: flex;
          align-items: center;
          justify-content: center;

          .title {
            font-size: 17px;
            font-weight: bold;
            color: #000000;
            padding: 0 20px;
          }

          .num {
            font-size: 23px;
            font-weight: bold;
            color: #409eff;
          }
        }
      }
    }
  }

  .bottom {
    .left {
      background-color: #fff;
      border-radius: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .title-padding {
        padding-top: 15px;
      }

      .title {
        font-size: 17px;
        font-weight: bold;
        padding-left: var(--mt-padding);
        border-left: 3px solid var(--el-color-primary);
        height: 16px;
        line-height: 16px;
      }

      .echartsData {
        flex: 1;
      }

      .line {
        border-bottom: 2px solid #e6e6e6;
        margin-bottom: 30px;
      }

      .data {
        overflow: auto;
        height: calc(100vh - 680px);

        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #000000;
          font-size: 16px;
          font-weight: bold;
          padding: 0 30px 10px 30px;

          .flex {
            display: flex;
            align-items: center;
          }

          .one {
            background-color: #0e7ce2;
            border-radius: 50%;
            width: 10px;
            height: 10px;
          }

          .two {
            background-color: #ff8352;
            border-radius: 50%;
            width: 10px;
            height: 10px;
          }

          .three {
            background-color: #e271de;
            border-radius: 50%;
            width: 10px;
            height: 10px;
          }

          .txt {}

          .num {}
        }
      }
    }

    .table {
      background-color: #fff;
      border-radius: 10px;
      height: calc(100vh - 470px);
      display: flex;
      flex-direction: column;

      .content-padding {
        padding: 20px 16px;
        flex: 1;
        overflow: hidden;
      }

      .title-padding {
        padding-top: 15px;
      }

      .title {
        font-size: 17px;
        font-weight: bold;
        padding-left: var(--mt-padding);
        border-left: 3px solid var(--el-color-primary);
        height: 16px;
        line-height: 16px;
        flex-shrink: 0;
      }
    }
  }
}
</style>
